<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <text class="title">我的订单</text>
      <view class="nav-buttons">
  <text :class="{active: activeTab === 'pending'}" @click="switchTab('pending')">待抢单</text>
  <text :class="{active: activeTab === 'grabbed'}" @click="switchTab('grabbed')">已抢单</text>
  <text :class="{active: activeTab === 'delivering'}" @click="switchTab('delivering')">配送中</text>
  <text :class="{active: activeTab === 'completed'}" @click="switchTab('completed')">已完成</text>
</view>
    </view>
    
    <!-- 订单列表 -->
    <view class="order-list">
  <view v-if="currentOrders.length === 0" class="empty-state">
    <image src="/static/none.png" mode="aspectFit"></image>
    <text class="empty-text">暂无订单</text>
  </view>
  <view class="order-card" v-for="(order, index) in currentOrders" :key="index">
        <view class="order-header">
          <text class="order-id">订单号: #{{order?.orderNo || ''}}</text>
          <view class="order-status">
  <uniIcon v-if="order?.status === '待抢单'" type="sound" size="16" color="#ffb000"></uniIcon>
  <uniIcon v-if="order?.status === '配送中'" type="paperplane" size="16" color="#07C160"></uniIcon>
  <uniIcon v-if="order?.status === '已完成'" type="compose" size="16" color="#07C160"></uniIcon>
  <text>{{order?.status || ''}}</text>
</view>
        </view>
        
        <view class="order-content">
          <view class="store-info">
            <text class="label">商家:</text>
            <text>{{order.supplier?.name || ''}}</text>
          </view>
          
          <view class="customer-info">
            <text class="label">客户:</text>
            <text>{{order.user?.nickName || ''}}</text>
            <text>{{order.user?.mobile || ''}}</text>
          </view>
          
          <view class="delivery-info">
            <text class="label">配送地址:</text>
            <text>{{order.orderAddress?.detail || ''}}</text>
          </view>
          
          <view class="time-info">
            <text class="label">预计送达:</text>
            <text>{{order?.mealtime || ''}}</text>
          </view>
        </view>
        
        <view class="order-footer">
          <text class="price">配送费: ¥{{order?.takeFee || ''}}</text>
          <button v-if="order?.deliverStatus === 1" class="btn btn-red" @click="grabOrder(order)">
  <uniIcon type="sound" size="16" color="white"></uniIcon>
  抢单
</button>
<button v-if="order?.deliverStatus === 2" class="btn btn-green" @click="pickupAtStore(order)">
  <uniIcon type="location" size="16" color="white"></uniIcon>
  到店取餐
</button>
<button v-if="order?.deliverStatus === 3" class="btn btn-blue" @click="completeDelivery(order)">
  <uniIcon type="checkmark" size="16" color="white"></uniIcon>
  已送达
</button>
<button v-if="order?.deliverStatus === 4" class="btn btn-blue" @click="viewOrderDetail(order)">
  <uniIcon type="eye" size="16" color="white"></uniIcon>
  详情
</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import utils from '@/common/utils.js';
import uniIcon from "@/components/uni-icon/uni-icon.vue"
export default {
  components: {uniIcon},
    data() {
      return {
        activeTab: 'all',
        currentOrders: [],
        completedOrders: [{
            id: '20230615001',
            status: '已完成',
            storeName: '肯德基(人民广场店)',
            customerName: '张先生',
            customerPhone: '138****1234',
            deliveryAddress: '上海市黄浦区人民广场100号',
            deliveryTime: '30分钟内',
            deliveryFee: '8.00'
          },
          {
            id: '20230615001',
            status: '已完成',
            storeName: '肯德基(人民广场店)',
            customerName: '张先生',
            customerPhone: '138****1234',
            deliveryAddress: '上海市黄浦区人民广场100号',
            deliveryTime: '30分钟内',
            deliveryFee: '8.00'
          },],
        orders: [
          {
            id: '20230615001',
            status: '待抢单',
            storeName: '肯德基(人民广场店)',
            customerName: '张先生',
            customerPhone: '138****1234',
            deliveryAddress: '上海市黄浦区人民广场100号',
            deliveryTime: '30分钟内',
            deliveryFee: '8.00'
          },
          {
            id: '20230615008',
            status: '已抢单',
            storeName: '海底捞(陆家嘴店)',
            customerName: '周先生',
            customerPhone: '139****2345',
            deliveryAddress: '上海市浦东新区陆家嘴环路1000号',
            deliveryTime: '60分钟内',
            deliveryFee: '15.00'
          },
          {
            id: '20230615003',
            status: '待抢单',
            storeName: '必胜客(淮海路店)',
            customerName: '王先生',
            customerPhone: '137****9012',
            deliveryAddress: '上海市黄浦区淮海中路300号',
            deliveryTime: '25分钟内',
            deliveryFee: '12.00'
          },
          {
            id: '20230615004',
            status: '待抢单',
            storeName: '星巴克(新天地店)',
            customerName: '赵女士',
            customerPhone: '136****3456',
            deliveryAddress: '上海市黄浦区新天地广场',
            deliveryTime: '20分钟内',
            deliveryFee: '15.00'
          },
          {
            id: '20230615006',
            status: '待抢单',
            storeName: '真功夫(静安寺店)',
            customerName: '刘先生',
            customerPhone: '134****5678',
            deliveryAddress: '上海市静安区南京西路1700号',
            deliveryTime: '35分钟内',
            deliveryFee: '7.00'
          },
          {
            id: '20230615002',
            status: '配送中',
            storeName: '麦当劳(南京东路店)',
            customerName: '李女士',
            customerPhone: '159****5678',
            deliveryAddress: '上海市黄浦区南京东路200号',
            deliveryTime: '45分钟内',
            deliveryFee: '10.00'
          },
          {
            id: '20230615005',
            status: '配送中',
            storeName: '汉堡王(南京西路店)',
            customerName: '陈先生',
            customerPhone: '135****7890',
            deliveryAddress: '上海市静安区南京西路1000号',
            deliveryTime: '40分钟内',
            deliveryFee: '9.00'
          },
          {
            id: '20230615007',
            status: '配送中',
            storeName: '永和大王(徐家汇店)',
            customerName: '孙女士',
            customerPhone: '133****8901',
            deliveryAddress: '上海市徐汇区虹桥路1号',
            deliveryTime: '50分钟内',
            deliveryFee: '11.00'
          }
        ],
        allOrders: [],
        pendingOrders: [],
        deliveringOrders: []
      }
    },
    created() {
      this.currentOrders = [...this.orders];
      this.activeTab = 'pending';
      this.getData(); 
      this.switchTab(this.activeTab);
    },
    onShow() {
      this.currentOrders = [];
      this.switchTab(this.activeTab);
    },
    methods: {
      viewOrderDetail(order) {
        uni.navigateTo({
          url: '/pages/rider/order/riderOrderDetail?order=' + JSON.stringify(order)
        });
      },
      grabOrder(order) {
        const self = this;
 self._postBody(
       	'user/order/grab', {
				 'orderId': order.orderId
			},
        function(res) {
         	if (res.data.flag === true) {
				  uni.navigateTo({
				    url: '/pages/rider/order/riderOrderDetail?order=' + JSON.stringify(order)
				  });
				  uni.showToast({
				    title: '抢单成功',
				    icon: 'success'
				  });
				  // 刷新订单列表
				  self.getData();
				} else {
				  uni.showToast({
				    title: res.data.message || '抢单失败',
				    icon: 'none'
				  });
				}
        },
        (err) => {
          self.loadingClock = false;
        }
      );
},
      classifyOrders() {
        this.pendingOrders = this.orders.filter(order => order.deliverStatus === 1);
        this.deliveringOrders = this.orders.filter(order => order.deliverStatus === 2);
        this.allOrders = [...this.orders];
      },
	  /*获取数据*/
	  getData() {
	  	if (!this.getUserId()) {
	  		this.loading = false;
	  		return;
	  	}
	  	let self = this;
	  	self.loading = true;
	  	self._postBody(
	  		'user/order/dqdlists', {
	  			dataType: this.activeTab === 'pending' ? '1' : this.activeTab === 'grabbed' ? '2' : this.activeTab === 'delivering' ? '3' : '4',
	  			pageIndex: self.page,
	  			pageSize: self.listRows,
	  		},
	  		function(res) {
	  			self.loading = false;
				self.currentOrders = [...res.data.records];
	  			self.completedOrders =res.data.records;
				console.log(self.completedOrders)
				
	  			self.lastPage = res.data.lastPage;
	  			if (res.data.lastPage <= 1) {
	  				self.no_more = true;
	  			} else {
	  				self.no_more = false;
	  			}
	  			self.isfirst = true;
	  		}
	  	);
	  },
      switchTab(tab) {
      this.activeTab = tab;
      this.getData();
      if(tab === 'pending') {
        this.currentOrders = this.orders.filter(order => order.deliverStatus === 1);
      } else if(tab === 'grabbed') {
        this.currentOrders = this.orders.filter(order => order.deliverStatus === 2);
      } else if(tab === 'delivering') {
        this.currentOrders = this.orders.filter(order => order.deliverStatus === 3);
      } else if(tab === 'completed') {
        this.currentOrders = this.orders.filter(order => order.deliverStatus === 4);
      }
      // uni.showToast({
      //   title: `已切换到${this.getTabName(tab)}订单`,
      //   icon: 'none'
      // });
    },
      getTabName(tab) {
        const names = {
          'all': '已抢单',
          'pending': '待接单',
          'delivering': '配送中',
          'completed': '已完成'
        };
        return names[tab] || '';
      },
      pickupAtStore(order) {
        uni.navigateTo({
          url: '/pages/rider/order/riderDelivering?order=' + JSON.stringify(order)
        });
        uni.showToast({
          title: '已确认到店取餐',
          icon: 'success'
        });
      },
      viewOrderDetail(order) {
        uni.navigateTo({
          url: '/pages/rider/order/riderOrderDetail?order=' + JSON.stringify(order) + (order.deliverStatus === 4 ? '&readonly=true' : '')
        });
      },
      completeDelivery(order) {
        uni.navigateTo({
          url: '/pages/rider/order/riderDelivering?order=' + JSON.stringify(order) + '&status=delivering'
        });
        uni.showToast({
          title: '已确认送达',
          icon: 'success'
        });
      }
    }
  }
</script>

<style>
.container {
  padding: 0;
  background-color: #f5f5f5;
}

.header {
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.nav-buttons {
  display: flex;
  justify-content: space-around;
}

.nav-buttons text {
  padding: 5px 10px;
  color: #666;
  margin: 0 5px;
  cursor: pointer;
}

.nav-buttons text.active {
  color: #07C160;
  font-weight: bold;
  border-bottom: 2px solid #07C160;
}

.order-card {
  margin: 15px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.order-id {
  color: #999;
}

.order-status {
  color: #07C160;
  font-weight: bold;
}

.order-content view {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}

.label {
  color: #999;
  margin-right: 10px;
  width: 80px;
}

.map-container {
  height: 150px;
  background-color: #eee;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.empty-text {
  margin-top: 10px;
  color: #999;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  
  .btn {
    transition: all 0.2s ease;
    
    &:hover {
      transform: scale(1.02);
    }
    
    &-red {
      background-color: #ff0000;
      color: white;
      
      &:hover {
        background-color: #e60000;
      }
    }
    
    &-blue {
      background-color: #1890ff;
      color: white;
      
      &:hover {
        background-color: #1478d6;
      }
    }
  }
}

.price {
  color: #ff5339;
  font-weight: bold;
}

.accept-btn {
  background: linear-gradient(to right, #07C160, #09BB07);
  color: white;
  border-radius: 20px;
  padding: 0 25px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
</style>